<!--
 * @Description: 模板列表
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2021-04-28 15:22:00
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-23 16:40:37
-->
<template>
  <div class="TemplateConfig" style="min-width: 534px; height: 100%">
    <fks-query-page
      v-loading="tableLoading"
      :data="tableData"
      :total="total"
      :page-size.sync="pageSize"
      :current-page.sync="page"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100]"
      :element-loading-text="LANG.LOADING"
      :table-name="LANG.CMS_TEMPLATE"
      @query="getList"
      @clear="clear"
      @sort-change="sortHandle"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-input
            v-model="keywords"
            size
            maxlength="50"
            class="single-searchBox-item"
            :placeholder="LANG.INPUT_TEMPLATENAME"
            clearable
            @keyup.native.enter="search"
            @clear="search"
          >
            <fks-button slot="append" icon="fks-icon-search" @click="search" />
          </fks-input>
          <fks-button
            v-permission:1="['templateConfig:add']"
            icon="fks-icon-plus"
            type="primary"
            @click="addTemplate"
          >
            {{ LANG.ADD }}
          </fks-button>
        </div>
      </template>

      <template class="category_Table">
        <fks-table-column label="#" width="55">
          <template slot-scope="scope">
            <span>
              {{ scope.$index + 1 }}
            </span>
          </template>
        </fks-table-column>
        <fks-table-column
          sortable="custom"
          :label="LANG.TEMPLATE_NAME"
          prop="title"
          align="left"
          min-width="300px"
          is-link
          @link="showTemplate"
        />
        <fks-table-column
          :label="LANG.DESCRIPTION"
          prop="description"
          min-width="350px"
          align="left"
        />

        <fks-table-column
          :label="LANG.UPDATE_DATE"
          sortable="custom"
          prop="updateDate"
          width="200px"
          align="center"
        />

        <fks-table-column
          :label="LANG.OPERATION"
          header-align="center"
          align="left"
          width="100"
        >
          <span slot-scope="scope">
            <fks-button
              v-permission:1="['templateConfig:edit']"
              type="text"
              @click="editTemplate(scope.row)"
            >
              {{ LANG.EDIT }}
            </fks-button>
            <fks-button
              v-permission:1="['templateConfig:delete']"
              type="text"
              style="color: #ff4d4f"
              @click="delTemplate(scope.row)"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </span>
        </fks-table-column>
      </template>
    </fks-query-page>

    <div class="dialogs">
      <edit-template
        :visible="visible_show_template"
        :operate-type="operate_type"
        :item="current_row"
        @close="closeNewTemplate"
        @submit="submitAddTemplate"
      />
      <new-edit-template
        :visible="visible_edit_template"
        :operate-type="operate_type"
        :item="current_row"
        @close="closeNewTemplate"
        @submit="submitAddTemplate"
      />
    </div>
  </div>
</template>

<script>
import { getTemplateList, getCategoryByTemplateId } from '@/modules/Content/api'
import { delTemplate } from './api/index'
import EditTemplate from './components/Dialog/EditTemplate/index'
import { transDate } from '@/modules/Content/util'
import NewEditTemplate from './components/Dialog/NewEditTemplate/index'
import Mix from '@/mixins/module'
export default {
  name: 'ContentTemplate',
  components: { EditTemplate, NewEditTemplate },
  mixins: [Mix],
  data() {
    return {
      keywords: '',
      columnName: '',
      sort: '',
      operate_type: 'new',
      tableLoading: false,
      visible_edit_template: false,
      visible_show_template: false,
      page: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      select_row: [],
      templateList: [],
      Form: {},
      current_row: {}
    }
  },
  computed: {},
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * @description: 排序响应
     * @param {prop,order} sort
     */
    sortHandle(sort) {
      this.columnName = sort.prop
      if (!sort.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = sort.order === 'ascending' ? 'asc' : 'desc'
      }
      this.getList()
    },

    /**
     * @description: 弹窗控制
     */
    openNewTemplate() {
      this.visible_edit_template = true
    },
    closeNewTemplate() {
      this.visible_edit_template = false
      this.visible_show_template = false
      this.current_row = {}
      this.operate_type = 'new'
    },

    addTemplate() {
      this.operate_type = 'new'
      this.openNewTemplate()
    },
    showTemplate({ row }) {
      this.operate_type = 'show'
      this.current_row = row
      // this.openNewTemplate()
      this.visible_show_template = true
    },
    editTemplate(row) {
      this.operate_type = 'edit'
      this.current_row = row
      this.openNewTemplate()
    },

    delTemplate(row) {
      this.$confirm(this.LANG.DELETE_CONFIRM, this.LANG.TIPS, {
        confirmButtonClass: 'fks-button--danger',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true,
        type: 'warning'
      })
        .then(() => {
          this.delTemplateById(row.id)
        })
        .catch(() => {})
    },
    delTemplateById(id) {
      getCategoryByTemplateId(id).then((res) => {
        if (res.status) {
          if (res.data.length > 0) {
            this.$message({
              type: 'error',
              message: this.LANG.ERROR_BE_USED
            })
          } else {
            return delTemplate(id).then((res) => {
              if (res.status) {
                this.$message({
                  showClose: true,
                  message: this.LANG.DELETE_SUCCESS,
                  type: 'success'
                })
                //删除相关处理
                if (this.tableData.length == 1 && this.page > 1)
                  this.pageChange(this.page--)
                else this.getList()
              }
            })
          }
        }
      })
    },

    /**
     * @description: 配置字段页面回调
     */
    submitAddTemplate() {
      this.closeNewTemplate()
      this.getList()
    },

    /**
     * @description:获得tableData的展示数据
     */
    @permission('content:template')
    getList: async function () {
      this.tableLoading = true
      await this.getTemplateList()
      this.tableData = this.dealData(this.templateList)
      this.tableLoading = false
    },
    getTemplateList() {
      let data = {
        name: this.keywords,
        page: this.page,
        size: this.pageSize,
        columnName: this.columnName,
        sort: this.sort
      }
      return getTemplateList(data).then((res) => {
        this.templateList = []
        this.total = 0
        if (res.status) {
          this.templateList = res.data.templateList
          this.total = res.data.itemNumber
        }
      })
    },

    /**
     * @description:
     * @param {Object} list 从后端获取的List
     * @return {Object} returnList 处理之后用于table展示的List
     */
    dealData(list) {
      let newList = JSON.parse(JSON.stringify(list))
      let returnList = []
      newList.forEach((item) => {
        let temp = {
          id: item.id,
          title: item.name,
          description: item.description,
          updateUser: item.updateBy,
          updateDate: this.transDate(item.updateDate)
        }
        returnList.push(temp)
      })
      return returnList
    },

    transDate,

    /**
     * @description: 翻页
     */
    pageSizeChange(size) {
      this.pageSize = size
      this.initData()
    },
    pageChange(page) {
      this.pageNo = page
      this.initData()
    },

    /**
     * @description: 搜索相关
     */
    search() {
      this.page = 1
      this.getList()
    },

    clear() {
      this.page = 1
      this.keywords = ''
      this.getList()
    },
    /**
     * @description:
     * @param {*}
     * @return {*}
     * @author: chen_yt
     */
    resetData() {
      this.keywords = ''
      this.columnName = ''
      this.sort = ''
      this.page = 1
      this.templateList = []
      this.tableData = []
    },
    initData() {
      this.resetData()
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.column-field-config {
  /* border: 1px solid red; */
  height: calc(100% - 48px);
  margin: 24px;

  .field-config-head {
    height: 60px;
    border-bottom: 1px solid #d4d9e0;
  }
}

.btns {
  float: right;
}

.field-config-content {
  height: calc(100% - 150px);

  .operate-btns {
    height: 35px;
    margin-top: 24px;
  }

  .field-config-table-content {
    /* border: 1px solid red; */
    height: 100%;
    margin-top: 24px;
  }
}
</style>